<template>
  <el-row class="root-el-row" type="flex" justify="center" align="middle">
    <el-col class="root-el-col" :span="24">
      <el-row>
        <div style="margin-left: 20px; margin-top: 20px">
          <el-col :span="17">
            <el-breadcrumb separator="/">
              <el-breadcrumb-item v-for="(item,key) in path_list" :key="key" style="margin-bottom: 5px" @click.native="updateDir(item.to_url)"> <el-button type="primary" size="mini" round>{{ item.dir_name }}</el-button></el-breadcrumb-item>
            </el-breadcrumb>
          </el-col>
          <el-col :span="5">
            <el-upload
              ref="upload"
              class="upload-demo"
              :action="'http://47.97.66.178:5000//view_files/upload/'+ current_dir"
              :on-preview="handlePreview"
              :on-progress="handleProgress"
              :on-remove="handleRemove"
              :on-success="handleSuccess"
              :file-list="fileList"
              :auto-upload="false"
              style="width: 300px;"
            >
              <el-button slot="trigger" size="small" type="primary" icon="el-icon-folder-add">选取本地文件</el-button>
              <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload"><i class="el-icon-upload el-icon--right" />上传到服务器</el-button>
              <div slot="tip" class="el-upload__tip">仅支持在insects_detection文件夹内上传文件哦~🤭</div>
            </el-upload>
          </el-col>
        </div>
      </el-row>

      <el-table
        :data="file_list"
        :header-cell-style="{'text-align':'center'}"
        style="width: 100%"
        @row-dblclick="enterDir"
      >
        <el-table-column
          label="文件名"
          width="300"
          align="left"
        >
          <template slot-scope="scope">
            <div style="margin-left: 40px">
              <el-popover trigger="hover" placement="top">
                <label v-text="const_folders[scope.row.filename]? '★'+const_folders[scope.row.filename]:'☆项目文件或常规文件'" />
                <div slot="reference" class="name-wrapper" style="margin-left: 10px">
                  <i style="font-size: 20px" :class="filetype_icon_map[scope.row.filetype]" /> <el-tag size="medium" style="font-size: 14px" :type="(scope.row.is_dir===1)?'info':''">{{ scope.row.filename }}</el-tag>
                </div>
              </el-popover>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="文件大小"
          width="160"
          align="center"
        >
          <template slot-scope="scope">

            <span style="margin-left: 10px">{{ scope.row.filesize }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="文件类型"
          width="160"
          align="center"
        >
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.filetype }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="最后修改时间"
          width="240"
          align="center"
        >
          <template slot-scope="scope">
            <span style="margin-left: 10px"><i class="el-icon-time" />{{ scope.row.last_modify_time }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          fixed="right"
        >
          <template slot-scope="scope">
            <!--        <a class='download' :href='handleDownload(scope.$index, scope.row)' download=""  title="下载">下载</a>-->
            <el-button-group>
              <el-button
                type="primary"
                icon="el-icon-download"
                :disabled="scope.row.is_dir===1"
                @click="handleDownload(scope.$index, scope.row)"
              />
              <el-button
                type="primary"
                icon="el-icon-thumb"
                @click="handleSelected(scope.$index, scope.row)"
              />
              <el-button type="primary" icon="el-icon-share" @click="handleShare" />
              <el-button
                v-if="scope.row.filetype==='ZIP'"
                type="primary"
                icon="el-icon-box"
                @click="handleUnzip(scope.$index, scope.row)"
              />
              <el-button
                type="danger"
                icon="el-icon-delete"
                :disabled="scope.row.is_dir===1||scope.row.filetype==='XML'"
                @click="handleDelete(scope.$index, scope.row)"
              />
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>

</template>

<script>
import { queryFileDir, downloadFile, getCurrentDir, delete_file_or_dir, unzip_selected_file } from '@/api/remote-search'
export default {
  name: 'FileView',
  data() {
    return {
      base_url: 'http://47.97.66.178:5000//view_files/uploads',
      file_list: null,
      path_list: [{ 'dirname': '' }],
      current_dir: '',
      fileList: [],
      const_folders: {
        'insects_detection': '病虫害识别工作文件夹',
        'insects_imgs': '存储粘虫板原始图像',
        'trainning_data_source': '存储虫种学习相关昆虫特征',
        'trainning_models': '存储虫害识别相关模型',
        'chas_data': '存储虫害特征数据',
        'processed_single_imgs': '存储虫群计数标记后的图片',
        'processed_imgs': '存储预处理后的图片',
        'insects_tags': '存储人工判别获得的虫种分类文件'
      },
      filetype_icon_map: { '文件夹': 'el-icon-folder', 'JPG': 'el-icon-picture', 'TXT': 'el-icon-tickets', 'PNG': 'el-icon-picture-outline', 'ZIP': 'el-icon-takeaway-box' }
    }
  },
  mounted() {
    this.query_file_info()
    this.currentDir()
  },
  methods: {
    currentDir() {
      getCurrentDir('').then(response => {
        this.path_list = response.data.parent_dir_list
        // console.log(this.path_list)
      })
    },
    handleDownload(index, row) {
      // console.log(row)
      downloadFile(row.fullname, row.filename)
    },
    handleUnzip(index, row) {
      const that = this
      this.$confirm('解压到当前目录?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // console.log(row)
        // 当前仅适配linux
        const file_dest_path = row.fullname + '-/' + that.current_dir
        // console.log(file_dest_path)
        unzip_selected_file(file_dest_path)
          .then(function(res) {
            if (res.data.status === 'success') {
              that.$message({
                type: 'success',
                message: res.message
              })
              // console.log(that.current_dir)
              that.updateDir(that.current_dir)
            } else {
              that.$message({
                type: 'error',
                message: '⚠解压失败'
              })
            }
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消解压缩'
        })
      })
    },
    handleDelete(index, row) {
      const that = this
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delete_file_or_dir(row.fullname)
          .then(function(respDate) {
            if (respDate.data.delete_stat === 'ok') {
              that.$message({
                type: 'success',
                message: '删除成功!'
              })
              // console.log(that.current_dir)
              that.updateDir(that.current_dir)
            } else {
              that.$message({
                type: 'error',
                message: '删除失败!'
              })
            }
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleSelected(index, row) {
      // const that = this
      this.$confirm('确定选中“' + row.filetype + '“ ' + row.filename + '？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return this.$emit('getSelectedFile', row)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消选定'
        })
      })
    },
    updateDir(query_path) {
      getCurrentDir(query_path).then(response => {
        this.path_list = response.data.parent_dir_list
        // console.log(this.path_list)
        queryFileDir(query_path).then(response => {
        // console.log(response.data.ele_list[0].filesize)
          const file_list = []
          for (const i in response.data.ele_list) {
            file_list.push(response.data.ele_list[i])
          }
          // console.log(file_list)
          this.file_list = file_list
        })
      })
    },
    enterDir(row) {
      // console.log(row.fullname)
      getCurrentDir(row.fullname).then(response => {
        // console.log(response.data.logs_dir)
        this.path_list = response.data.parent_dir_list
        // console.log(response.data.parent_dir_list)
      })
      queryFileDir(row.fullname).then(response => {
        // console.log(response.data.ele_list[0].filesize)
        this.current_dir = response.data.logs_dir
        const file_list = []
        for (const i in response.data.ele_list) {
          file_list.push(response.data.ele_list[i])
        }
        // console.log(file_list)
        this.file_list = file_list
      })
    },
    query_file_info() {
      queryFileDir('').then(response => {
        // console.log(response.data.logs_dir)
        this.current_dir = response.data.logs_dir
        const file_list = []
        for (const i in response.data.ele_list) {
          file_list.push(response.data.ele_list[i])
        }
        // console.log(file_list)
        this.file_list = file_list
      })
    },
    submitUpload() {
      this.$refs.upload.submit()
      this.show_progress = true
    },
    handleRemove(file, fileList) {
      // console.log(file, fileList)
      this.show_progress = false
    },
    handlePreview(file) {
      // console.log(file)
    },
    handleProgress(e, file) {
      // console.log(e)
      this.upload_percent = e.percent
    },
    handleShare() {
      this.$message({
        type: 'info',
        message: '分享功能暂未开放，请耐心等待~'
      })
    },
    handleSuccess() {
      this.updateDir(this.current_dir)
      this.$message({
        message: '上传成功~♥',
        type: 'success'
      })
    }
  }
}
</script>
<style>

</style>
